<template>
  <view class="page page-primary has-fixed-footer">
    <page-header theme="colorful"></page-header>
    <view class="page-content">
      <!-- 头部卡片 -->
      <page-statistic :data="purchaserData"></page-statistic>
      <!-- 搜索框 -->
      <view class="page-search">
        <fui-input v-model="searchValue" borderTop color="#333" radius=16 :borderBottom="false" placeholderStyle="font-size:28rpx" placeholder="请输入公司名称搜索"></fui-input>
        <span class="icon iconfont" @click="searchCenter">&#xe628;</span>
      </view>
      <!-- 页签 -->
      <view class="page-tab">
        <fui-tabs :tabs="tabs" @change="change" background="rgba(0,0,0,0)" size="32" color='#666666' sliderRadius=-1 :center='true' fontWeight='bold' selectedSize='32' selectedColor='var(--fui-color-primary)' scale='1' sliderHeight='8' selectedFontWeight='bold' bottom=3></fui-tabs>
      </view>
      <!-- 列表页 -->
      <view v-for="item in list" :key="item.id">
        <view class="page-list">
          <view class="list-top">
            <view class="list-title">
              <image class="list-title-icon" v-if="item.userType === '1'" :src="`/static/images/icon-gr.png`" mode=""></image>
              <image class="list-title-icon" v-if="item.userType === '0'" :src="`/static/images/icon-gs.png`" mode=""></image>
              <text class="list-title-text" :class="{'w100': tabIndex != 2}">{{item.userType === '1' ? item.adminName : item.companyName}}</text>
              <span v-if="tabIndex == 2" class="icon iconfont icon-certified">&#xe681;</span>
            </view>
            <view v-if="tabIndex == 2" :class="item.useState == '1' ? 'list-tag' : 'list-tag tag-red'">
              {{ item.useState == '1' ? '已启用':'已停用'}}
            </view>
          </view>
          <view class="list-content" @click="goDetails(item.id, item.useState)">
            <!-- <view class="list-img">
              <image v-if="item.userType === '1'" :src="item.adminCardBack" alt="负责人身份证件"></image>
              <image v-if="item.userType !== '1'" :src="item.businessLicense" alt="营业执照"></image>
            </view> -->
            <view class="list-right">
              <view class="right-label" v-if="item.userType === '1'">负责人手机号<span>{{ maskPhoneNumber(item.adminPhone) }}</span></view>
              <view class="right-label" v-if="item.userType !== '1'">统一信用代码<span>{{ item.creditCode }}</span></view>
              <view class="right-label" v-if="tabIndex == 2">累计采购数量<span class="right-blue">{{item.totalGoodsAmount}}</span>个
              </view>
              <view class="right-label" v-if="tabIndex == 2">累计消费额<span class="right-blue">{{utils.moneyFormatter(item.totalAmount / 1000000)}}</span>万元
              </view>
            </view>
          </view>
        </view>
      </view>
      <fui-loadmore :state="moreState"></fui-loadmore>
      <view class="ui-fixed-footer">
        <fui-button text="邀约" height="78rpx" @click="jumpAdd"></fui-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad, onShow, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
import { useStore } from 'vuex'
import pageHeader from '@/components/header'
import pageStatistic from '@/components/statistic'
import purchaserApi from '@/api/purchaser'
import utils from '@/components/firstui/fui-utils'
import { formatValue, formatUnit, maskPhoneNumber } from '@/utils/tools'

const modal = inject('$modal')
const store = useStore()

const tabs = ref([
  {
    name: '已通过',
    val: 2
  }, {
    name: '邀约中',
    val: '0',
    badge: 0
  },
  {
    name: '待审核',
    val: 1,
    badge: 0
  },
  {
    name: '已驳回',
    val: '3'
  }
])
const tabIndex = ref(2)


const purchaserData = ref([
  {
    name: '采购方数量',
    value: 0,
    unit: '个'
  },
  {
    name: '订单数量',
    value: 0,
    unit: '单'
  },
  {
    name: '订单额度',
    value: 0,
    unit: '万元'
  }
])

onShow(() => {
  getPurchaserList()
  getStatisticsData()
})

const name = ref('已通过')
const moreState = ref(1)
const list = ref([])
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  attestationState: 2,
  companyName: ''
})
const getPurchaserList = (() => {
  queryParams.value.companyName = searchValue.value
  purchaserApi.getPurchaserList(queryParams.value).then((res) => {
    if (res.code == 0) {
      uni.stopPullDownRefresh(); //终止下拉刷新动作
      modal.closeLoading();
      if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
        moreState.value = 3
      } else {
        moreState.value = 1
      }
      if (queryParams.value.pageNo > 1) {
        list.value = [...list.value, ...res.data.list]
      } else {
        list.value = [...res.data.list]
      }
    }
  })
})

// 获取统计数据
const { currentTenantId, currentDeptId } = store.getters
const getStatisticsData = () => {
  try {
    purchaserApi.getStatisticData({
      zhid: currentTenantId,
      gsid: currentDeptId
    }).then(res => {
      if (res.code === 0 && res.data) {
        if (res.data.jbxx) {
          purchaserData.value[0].value = formatValue(res.data.jbxx.cgfsl || 0)
          purchaserData.value[0].unit = formatUnit(res.data.jbxx.cgfsl || 0, '个')
          purchaserData.value[1].value = formatValue(res.data.jbxx.ddsl || 0)
          purchaserData.value[1].unit = formatUnit(res.data.jbxx.ddsl || 0, '单')
          purchaserData.value[2].value = formatValue((res.data.jbxx.ddje * 10000 || 0).toFixed(2))
          purchaserData.value[2].unit = formatUnit((res.data.jbxx.ddje * 10000 || 0).toFixed(2), '元')
          
          // 获取供应商邀约中、待审核角标数字
          tabs.value[1].badge = res.data.jbxx.cgfyyz
          tabs.value[2].badge = res.data.jbxx.cgfdsh
        }
      } else {
        modal.msgError('获取统计数据失败！')
      }
    })
  } catch(err) {
    modal.msgError('获取统计数据失败！')
  }
}

// 搜索
const searchValue = ref('')
const searchCenter = (e) => {
  queryParams.value.pageNo = 1
  getPurchaserList()
}

// 页签
const change = (e) => {
  tabIndex.value = e.val
  name.value = e.name
  queryParams.value.pageNo = 1
  queryParams.value.attestationState = e.val
  getPurchaserList()
}

// 跳转邀约页面
const jumpAdd = () => {
  uni.navigateTo({
    url: '/pages/purchaser/view/add'
  })
}

// 跳转详情页
const goDetails = (id, status) => {
  uni.navigateTo({
    url: `/pages/purchaser/view/details?id=${id}&name=${name.value == '已通过' ? status == '1' ? '已启用' : '已停用' : name.value}`
  })
}

//下拉刷新
onPullDownRefresh(() => {
  queryParams.value.pageNo = 1
  getPurchaserList()
})

// 上拉加载更多
onReachBottom(() => {
  if (moreState.value == 1) {
    modal.loading('加载中...');
    moreState.value = 2;
    queryParams.value.pageNo++
    getPurchaserList()
  }
})
</script>

<style lang="scss" scoped>
.page {
  .page-search {
    position: relative;
    width: 100%;
    margin: 30rpx 0 0;

    :deep(.fui-input__wrap) {
      padding: 20rpx 24rpx !important;
    }

    span {
      position: absolute;
      z-index: 10;
      right: 0;
      top: 0;
      font-size: 1.25rem;
      color: var(--fui-color-link);
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: 40rpx;
      color: var(--fui-color-link);
    }
  }

  .page-tab {
    :deep(.fui-tabs__scrollbox) {
      width: fit-content;
    }

    :deep(.fui-tabs__line-short) {
      width: 64rpx !important;
    }

    :deep(.fui-tabs__item) {
      padding-left: 5rpx;
      padding-right: 72rpx;
    }
  }

  .page-list {
    width: 100%;
    padding: 24rpx 30rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-weight: bold;
    color: #999999;
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-top: 30rpx;

    .list-title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 50rpx;
      .list-title-icon {
        margin-right: 10rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }

    .list-title-text {
      max-width: 68%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.w100 {
        max-width: calc(100% - 42rpx);
      }
    }

    .list-top {
      position: relative;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      line-height: 32rpx;

      span {
        font-size: 32rpx;
        margin-left: 10rpx;
        color: #dfdfdf;

        &.icon-certified {
          color: #fcad4c;
        }
      }

      .list-tag {
        position: absolute;
        top: 10rpx;
        right: 0;
        font-size: 24rpx;
        font-weight: bold;
        color: #08bb53;
        padding: 2rpx 16rpx;
        border-radius: 32rpx;
        background: rgba(12, 188, 84, 0.08);

        &.tag-red {
          color: #f95a5a;
          background: rgba(249, 90, 90, 0.14);
        }
      }
    }

    .list-content {
      margin-top: 12rpx;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .list-img {
        width: 156rpx;
        height: 112rpx;
        border-radius: 10rpx;
        overflow: hidden;
        margin-right: 20rpx;

        :deep(uni-image) {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .list-img1 {
        width: 118rpx;
        height: 86rpx;
      }

      .list-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .right-label {
          span {
            padding-left: 20rpx;
            font-weight: bold;
            color: #333333;

            &.right-blue {
              padding-right: 6rpx;
              font-size: 28rpx;
              font-weight: bold;
              color: var(--fui-color-primary);
            }
          }
        }
      }
    }
  }
}
</style>